<template>
  <div class="common-details">
    <div class="d-scroll py-1 px-1 bg-white ">
      <template v-if="trainDetail">
        <div class="baseLoad">
          <div v-for="(item, index) in descList" :key="index">
            <div>
              <custom-details-item :icon="item.icon" :label="item.label">
                <template #valueSlot>
                  <span v-if="item.fieldName !== 'fourNewsAttachName'">{{ item.value }}</span>
                  <span v-else>
                    <el-link
                      type="primary"
                      @click="openAttachPopUp([{
                        'fileId': '',
                        'fileName': item.value||'暂无数据',
                        'fileUrl': item.uuid,
                        'fileUuid': ''
                      }])"
                    >查看</el-link>
                  <!-- <el-link type="primary" @click="handleDownLoad(item.uuid)">{{ item.value }}</el-link> -->
                  </span>
                </template>
              </custom-details-item>
            </div>
          </div>
        </div>
        <customTitle :is-line="true" bg-color="#3795ff" title="“四新”风险要素" />
        <van-collapse v-if="riskFourNewsAnalysisVOS && riskFourNewsAnalysisVOS.length>0" v-model="activeNames">
          <van-collapse-item v-for="(item,index) in riskFourNewsAnalysisVOS" :key="index" :title="'危险要素分析及风险控制措施' + (index + 1)" :name="index">
            <div class="listInner">
              <div class="list_item">
                <div class="content_area">
                  <div class="right_content zdyClass">
                    <ul>
                      <li>
                        <div class="label">危险要素分析：</div>
                        <div class="value">{{ item.dangerAnalysis }}</div>
                      </li>
                      <li>
                        <div class="label">风险控制措施：</div>
                        <div class="value">{{ item.riskController }}</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
        <el-empty v-else class="baseLoad1" />
        <customTitle :is-line="true" bg-color="#3795ff" title="培训信息" />
        <div v-if="fourNewsTrainData && fourNewsTrainData.length>0" class="common_list">
          <div v-for="(item,index) in fourNewsTrainData" :key="index" class="list_item" @click="goDetails(item)">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.companyName }}
                </div>
                <ul>
                  <li v-for="desc in tableDescList" :key="desc.fieldName">
                    <i class="iconfont c-text-color1" v-html="desc.icon" />
                    <div class="label">{{ desc.label }}：</div>
                    <div class="value">{{ item[desc.fieldName] }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else class="baseLoad2" />
      </template>
      <template v-else>
        <div v-for="(item, index) in trainDescList" :key="index">
          <custom-details-item :icon="item.icon" :label="item.label" :value="item.value">
            <template #valueSlot>
              <span v-if="!item.uuid">{{ detail[item.fieldName] }}</span>
              <el-link
                v-else
                type="primary"
                @click="openAttachPopUp([{
                  'fileId': '',
                  'fileName': detail[item.fieldName]||'暂无数据',
                  'fileUrl': detail[item.uuid],
                  'fileUuid': ''
                }])"
              >查看</el-link>
              <!-- <el-link
                v-else
                type="primary"
                @click="openAttachPopUp([{
                  'fileId': '',
                  'fileName': detail[item.fieldName]||'暂无数据',
                  'fileUrl': detail[item.uuid],
                  'fileUuid': ''
                }])"
              >查看</el-link> -->
            </template>
          </custom-details-item>
        </div>
      </template>
    </div>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>

<script>
import { fourNewsDetail, fourNewsTrain } from '@/api/safety'
import commonList from '@/assets/mixin/commonList'

export default {
  mixins: [commonList],
  data() {
    return {
      current: '',
      id: '',
      companyName: '',
      activeNames: [0],
      descList: [
        { label: '企业名称', value: '', fieldName: 'companyName', icon: '&#xe725;' },
        { label: '“四新”名称', value: '', fieldName: 'fourNewsName', icon: '&#xe7e5;' },
        { label: '是否完成安全评审', value: '', fieldName: 'isSafeAudit', icon: '&#xe7e5;' },
        { label: '是否完成培训', value: '', fieldName: 'isTrain', icon: '&#xe7e5;' },
        { label: '“四新”种类', value: '', fieldName: 'fourNewsType', icon: '&#xe791;' },
        { label: '投入时间', value: '', fieldName: 'useTime', icon: '&#xe685;' },
        { label: '项目概况', value: '', fieldName: 'describe', icon: '&#xe994;' },
        { label: '安全评审表', value: '', fieldName: 'fourNewsAttachName', icon: '&#xe61c;' }
      ],
      trainDescList: [
        { label: '企业名称', fieldName: 'companyName', icon: '&#xe725;' },
        { label: '所属年份', fieldName: 'year', icon: '&#xe725;' },
        { label: '培训类别', fieldName: 'trainType', icon: '&#xe725;' },
        { label: '培训对象', fieldName: 'trainPerson', icon: '&#xe725;' },
        { label: '培训时间', fieldName: 'trainTime', icon: '&#xe725;' },
        { label: '培训地点', fieldName: 'trainPlace', icon: '&#xe725;' },
        { label: '培训时长（h）', fieldName: 'trainHour', icon: '&#xe725;' },
        { label: '培训级别', fieldName: 'trainLevel', icon: '&#xe725;' },
        { label: '培训形式', fieldName: 'trainForm', icon: '&#xe725;' },
        { label: '培训内容', fieldName: 'trainContent', icon: '&#xe725;' },
        { label: '被培训单位', fieldName: 'trainUnitName', icon: '&#xe725;' },
        { label: '参加培训人数', fieldName: 'trainPersonSum', icon: '&#xe725;' },
        { label: '考核通过率（%）', fieldName: 'trainPassPercent', icon: '&#xe725;' },
        { label: '参训人员签到表', fieldName: 'signInAttachName', uuid: 'signInAttachUUID', icon: '&#xe725;' },
        { label: '培训材料', fieldName: 'trainMaterialAttachName', uuid: 'trainMaterialAttachUUID', icon: '&#xe725;' },
        { label: '考核结果记录表', fieldName: 'trainResultAttachName', uuid: 'trainResultAttachUUID', icon: '&#xe725;' }
      ],
      tableDescList: [
        { label: '企业名称', fieldName: 'companyName', icon: '&#xe725;' },
        { label: '所属年份', fieldName: 'year', icon: '&#xe725;' },
        { label: '培训类别', fieldName: 'trainType', icon: '&#xe725;' },
        { label: '培训对象', fieldName: 'trainPerson', icon: '&#xe725;' },
        { label: '培训时间', fieldName: 'trainTime', icon: '&#xe725;' }
      ],
      riskFourNewsAnalysisVOS: [],
      fourNewsTrainData: [],
      trainDetail: true,
      detail: {},
      isFourNewsDetail: true
    }
  },
  mounted() {
    const { current, id } = this.$route.query
    this.id = id || ''
    this.current = current || ''
    this.$nextTick(() => {
      this.companyInfoBasic()
      this.fourNewsTrain()
    })
  },
  methods: {
    // 获取企业详情数据--基本信息
    async companyInfoBasic() {
      // this.layout.showAreaLoading(['.el-descriptions'])
      this.layout.showAreaLoading(['.baseLoad'])
      this.layout.showAreaLoading(['.baseLoad1'])

      const { status, data } = await fourNewsDetail({ fourNewsId: this.id })
      if (status === 0 && data) {
        this.companyName = data.companyName
        this.descList.forEach((v) => {
          v.value = data[v.fieldName] ? data[v.fieldName] : ''
          if (v.fieldName === 'fourNewsAttachName') {
            v.uuid = data.fourNewsAttachUUID
          }
        })
        this.riskFourNewsAnalysisVOS = data.riskFourNewsAnalysisVOS
      }
      // this.layout.hideAreaLoading(['.el-descriptions'])
      this.layout.hideAreaLoading(['.baseLoad'])
      this.layout.hideAreaLoading(['.baseLoad1'])
    },
    //   培训信息
    async fourNewsTrain() {
      this.layout.showAreaLoading(['.baseLoad2'])
      const { data, status } = await fourNewsTrain({
        fourNewsId: this.id,
        year: new Date().getFullYear(),
        trainType: '',
        trainPerson: '',
        trainLevel: '',
        trainForm: ''
      })
      if (data && status === 0) {
        this.fourNewsTrainData = data
      }
      this.layout.hideAreaLoading(['.baseLoad2'])
    },
    goDetails(item) {
      this.detail = item
      this.trainDetail = false
    }
  }
}
</script>

<style lang="scss" scoped>
.zdyClass {
  .label {
    color: #07142e;
    font-weight: normal;
    font-size: .32rem;
  }
  .value {
     color: #07142e !important;
    font-weight: normal !important;
    font-size: .32rem !important;
  }
}
.olMap {
  width: 100%;
  height: 350px;
}
</style>
